<script setup lang="ts">
import { ref } from 'vue'
const activeName = ref('all')
const orderStatus = [
  { name: 'unpay', label: '待付款' },
  { name: 'deliver', label: '待发货' },
  { name: 'receive', label: '待收货' },
  { name: 'comment', label: '待评价' },
  { name: 'complete', label: '已完成' },
  { name: 'cancel', label: '已取消' }
]
const handelClick = (tab: any, index: number) => {
  console.log(tab, index); // tab就是激活的组件, index是索引
  // 按需发送对应tab的请求
  if (index === 0) {
    console.log('处于所有订单页面');

  }
}
</script>
<template>
  <XtxTabs v-model="activeName" @tab-click="handelClick">
    <XtxTabsPane label="全部订单" name="all">全部的内容</XtxTabsPane>
    <XtxTabsPane v-for="item in orderStatus" :label="item.label" :name="item.name">{{ item.label }}</XtxTabsPane>
  </XtxTabs>
</template>
<style scoped>
</style>